<template>
  <view>
    <!-- <van-toast id="van-toast" /> -->

    <view class="order-list">
      <div class="gk-sticky">
        <view class="swiper-tab">
          <view
            :class="'tab-item ' + (currentTab == 0 ? 'active' : '')"
            data-current="0"
            @tap="swichNav"
            >未完成</view
          >
          <view
            :class="'tab-item ' + (currentTab == 1 ? 'active' : '')"
            data-current="1"
            @tap="swichNav"
            >已完成</view
          >
        </view>
      </div>
      <swiper
        class="tab-content"
        :current="currentTab"
        duration="300"
        @change="switchTab"
        :style="{ height: winHeight + 'rpx' }"
      >
        <!-- 未完成 -->
        <swiper-item class="swiper-item">
          <scroll-view class="scoll-h" v-if="!ousingisEmpty" scroll-y>
            <block v-for="(item, index) in ousing" :key="index">
              <view
                class="item-ans"
                :data-orderid="item.id"
                @tap.stop.prevent="toOrderDetail"
              >
                <view class="expertInfo">
                  <view class="answerHistoryOne">
                    <view class="stationName"
                      >站点： {{ item.stationName }}</view
                    >
                  </view>
                  <view class="answerHistory deviceCode"
                    >终端号：{{ item.deviceCode }}</view
                  >
                  <view class="answerHistory chargePrice">
                    <text class="price-name">实时金额：</text>
                    ¥{{ item.chargePrice }}
                  </view>
                </view>
                <view class="answerHistory createTime">
                  <view class="time">{{ formatDate(item.createTime) }}</view>
                  <view class="detail">
                    查看详情
                    <uni-icons type="right" size="16"></uni-icons>
                  </view>
                </view>
                <view class="type-tag">
                  <uni-tag
                    :inverted="true"
                    :text="orderType(item.type)"
                    type="warning"
                    size="large"
                  />
                </view>
              </view>
            </block>
            <view class="bottomTip" v-if="isLower">
              <view class="bottomTxt">~没有更多数据了~</view>
            </view>
          </scroll-view>
          <view class="item-ans" v-if="ousingisEmpty">
            <view class="empty-content">
              <view class="content">
                <image class="img" src="/static/images/empty-img.png"></image>
                <text class="text-tip">暂无数据哦</text>
              </view>
            </view>
          </view>
        </swiper-item>
        <!-- 已完成 -->
        <swiper-item class="swiper-item">
          <scroll-view class="scoll-h" v-if="!ofinishisEmpty" scroll-y>
            <block v-for="(item, index) in ofinish" :key="index">
              <view
                class="item-ans"
                v-if="ofinish.length !== 0"
                :data-orderid="item.id"
                @tap.stop.prevent="toOrderDetail"
              >
                <view class="expertInfo">
                  <view class="answerHistoryOne">
                    <view class="stationName"
                      >站点： {{ item.stationName }}</view
                    >
                  </view>
                  <view class="answerHistory deviceCode"
                    >终端号：{{ item.deviceCode }}</view
                  >
                  <view class="answerHistory chargePrice">
                    <text class="price-name">费用：</text>
                    ¥{{ item.chargePrice }}
                  </view>
                </view>
                <view class="answerHistory createTime">
                  <view class="time">{{ formatDate(item.createTime) }}</view>
                  <view class="detail">
                    查看详情
                    <uni-icons type="right" size="16"></uni-icons>
                  </view>
                </view>
                <view class="type-tag">
                  <uni-tag
                    :inverted="true"
                    :text="orderType(item.type)"
                    type="success"
                    size="large"
                  />
                </view>
              </view>
            </block>
            <view class="bottomTip" v-if="isLower">
              <view class="bottomTxt">~没有更多数据了~</view>
            </view>
          </scroll-view>
          <view v-if="ofinishisEmpty" class="item-ans">
            <view class="empty-content">
              <view class="content">
                <image class="img" src="/static/images/empty-img.png"></image>
                <text class="text-tip">暂无数据哦</text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <TabBarCus pageName="orderList" />
  </view>
</template>
<script>
import TabBarCus from "../../components/TabBarCus.vue";

import { formatDate, orderType } from "../../utils/util"
const app = getApp();
let Sign = app.globalData.Sign;
let Store = app.globalData.Store;
let Api = app.globalData.Api;
export default {
  components: { TabBarCus },
  data() {
    return {
      formatDate: formatDate,
      orderType: orderType,
      gobugo: true,
      ousing: [],
      // ousing: [{ id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }, { id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }, { id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }, { id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }, { id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }, { id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }],
      ousingisEmpty: false,
      ofinish: [],
      // ofinish: [{ id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }, { id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }, { id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }, { id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }, { id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }, { id: 'id', stationName: 'stationName', deviceCode: "deviceCode", chargePrice: 'chargePrice', createTime: "", type: 1 }],
      ofinishisEmpty: false,
      winHeight: '',

      //窗口高度
      currentTab: 0,

      //预设当前项的值
      scrollLeft: 0,

      //tab标题的滚动条位置
      ifRunData: true,

      //外循环
      ifRunDataIn: true,

      //内循环
      isLower: false,
    };
  }, //全局的数据共享（tabbar）
  // mixins: [storeBindingsBehavior],
  /**
   * 2 生命周期函数--监听页面加载
   * 判断用户是否登录
   */
  onLoad: function () {
    this.initLoad();
  },
  //下拉刷新
  onPullDownRefresh() {
    this.initLoad({});
    uni.stopPullDownRefresh();
  },
  onShow: function () {
    uni.hideTabBar()
    this.getOrderList();
    // 进入页面修改自定义选中
    // this.updateActive(3);
    // this.setData({
    this.ifRunData = true
    // });
    //高度适应
    this.adaptHeight();
    //定时刷新
    this.setTimeTo();
  },
  onUnload: function () {
    // this.setData({
    //   ifRunData: false
    // });
    this.ifRunData = false
  },
  onHide: function () {
    // this.setData({
    //   ifRunData: false
    // });
    this.ifRunData = false
  },
  methods: {
    /**
     * 2 生命周期函数--监听页面加载
     * 判断用户是否登录
     */
    initLoad: function () {
      const userId = Store.getItem('user_id');
      if (!userId) {
        if (this.gobugo) {
          // this.setData({
          //   gobugo: false
          // });
          this.gobugo = false

          //前往获取 userId
          setTimeout(function () {
            uni.redirectTo({
              url: '../sysLogin/sysLogin?pay_source=TABBAR_ORDERLIST'
            });
          }, 1000);
        }
      }
    },

    lower: function (e) {
      console.log(e);
      console.log('到底部了');
      // this.setData({
      //   isLower: true
      // });
    },

    //跳转详情页
    toOrderDetail(event) {
      uni.navigateTo({
        url: '../orderDetail/orderDetail?orderId=' + event.currentTarget.dataset.orderid
      });
    },

    //1 高度自适应
    adaptHeight: function () {
      var that = this;
      uni.getSystemInfo({
        success: function (res) {
          var clientHeight = res.windowHeight;
          var clientWidth = res.windowWidth;
          var rpxR = 750 / clientWidth;
          var calc = clientHeight * rpxR - 120;
          console.log('calc: ', calc);
          // that.setData({
          that.winHeight = calc
          // });
        }
      });
    },

    //3 点击标题切换当前页时改变样式
    swichNav: function (e) {
      var cur = e.target.dataset.current;
      if (this.currentTab == cur) {
        return false;
      } else {
        // this.setData({
        this.currentTab = cur,
          this.ifRunDataIn = cur == 0
        // });
      }
    },

    //2 切换标签样式
    switchTab: function (e) {
      // this.setData({
      this.currentTab = e.detail.current
      // });
      this.checkCor();
    },

    //判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor: function () {
      if (this.currentTab > 4) {
        // this.setData({
        this.scrollLeft = 300
        // });
      } else {
        // this.setData({
        this.scrollLeft = 0
        // });
      }
    },

    setTimeTo: function () {
      let that = this;
      setTimeout(function () {
        that.timing();
      }, 5000); //5分钟 =300000毫秒 //1分(min)=60000毫秒(ms)
    },

    timing: function () {
      if (this.ifRunData) {
        this.getOrderList();
        this.setTimeTo();
      }
    },

    getOrderList: function () {
      // Toast.loading({
      //   message: '加载中...',
      //   forbidClick: true,
      //   duration: 200
      // });
      if (!this.ifRunDataIn) {
        return;
      }
      const userId = Store.getItem('user_id');
      if (userId) {
        //获取订单数据
        const signObject = {
          userId
        };
        const signvalue = Sign.signutil(signObject);
        app.globalData
          .get(Api.getOrders, {
            userId,
            sign: signvalue
          })
          .then((res) => {
            var ousing = res.ousing;
            // var ousing = this.ousing
            if (ousing) {
              if (ousing.length === 0) {
                this.ousingisEmpty = true
              } else {
                this.ousingisEmpty = false
              }
              this.ousing = ousing
            } else {
              this.ousingisEmpty = true
            }
            if (res.ofinish) {
              var ofinish = res.ofinish;
              // var ofinish = this.ofinish 
              if (ofinish) {
                if (ofinish.length === 0) {
                  this.ofinishisEmpty = true
                } else {
                  this.ofinishisEmpty = false
                }
                this.ofinish = ofinish
              }
            } else {
              this.ofinishisEmpty = true
            }
          });
      }
    }
  }
};
</script>
<style>
@import "./orderList.css";
</style>
